import Vue from "vue";

import fullImg from '@/assets/images/full.png';
import noFullImg from '@/assets/images/nofull.png';

// dialogDrag

const registerEvent = (el) => {
  //弹框可拉伸最小宽高
  const minWidth = 250;
  const minHeight = 200;
  //初始非全屏
  let isFullScreen = false;
  //当前宽高
  let nowWidth = 0;
  let nowHight = 0;
  //当前顶部高度
  let nowMarginTop = '';
  console.log('el',el);
  //弹窗
  const dragDom = el.querySelector('.el-dialog');
  const dragDom2 = el.querySelector('.el-dialog__body');
  console.log(dragDom.style.width,'111111111111111')
  console.log(dragDom2,'dragDom2')
  //获取弹框头部（这部分可双击全屏）
  const dialogHeaderEl = el.querySelector('.el-dialog__header');
  if (!dialogHeaderEl) return;
  //添加全屏按钮
  const fullBtn = document.createElement('div');
  fullBtn.setAttribute('class', 'el-dialog__headereln_full');
  fullBtn.style.position = 'absolute';
  fullBtn.style.right = '55px';
  fullBtn.style.top = '13px';
  fullBtn.style.width = '24px';
  fullBtn.style.height = '24px';
  fullBtn.style.background = '#bdbcbb';
  fullBtn.style.borderRadius = '50%';
  fullBtn.style.display = 'flex';
  fullBtn.style.alignItems = 'center';
  fullBtn.style.justifyContent = 'center';
  fullBtn.style.cursor = 'pointer';
  const fullImage = document.createElement('img');
  fullImage.src = fullImg;
  fullBtn.append(fullImage);
  dialogHeaderEl.appendChild(fullBtn);
  //给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
  dragDom.style.overflow = 'auto';
  //清除选择头部文字效果
  dialogHeaderEl.onselectstart = () => false;
  //头部加上可拖动cursor
  dialogHeaderEl.style.cursor = 'move';
  // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
  const moveDown = (e) => {
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - dialogHeaderEl.offsetLeft;
    const disY = e.clientY - dialogHeaderEl.offsetTop;
    // 获取到的值带px 正则匹配替换
    let styL, styT;
    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
    if (sty.left.includes('%')) {
      styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);
      styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);
    } else {
      styL = +sty.left.replace(/px/g, '');
      styT = +sty.top.replace(/px/g, '');
    }
    const bodyWidth = document.body.clientWidth;
    const bodyHeight = document.body.clientHeight; // 获取屏幕高度
    document.onmousemove = function (e) {
      // 通过事件委托，计算移动的距离
      const l = e.clientX - disX;
      const t = e.clientY - disY;

      // console.log("鼠标移动到的位置",e.clientX, e.clientY)
      // 限制不让拖出屏幕 *****
      if (e.clientY < 20 || e.clientY > bodyHeight - 100) {
        return;
      }
      if (e.clientX < 100 || e.clientX > bodyWidth - 100) {
        return;
      }
      const left = `${l + styL}px`;
      const top = `${t + styT}px`;
      // 移动当前元素
      dragDom.style.left = left;
      dragDom.style.top = top;
    };
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
  dialogHeaderEl.onmousedown = moveDown;
  const setFull = () => {
    const parentDom = dragDom.parentNode;
    const img = dialogHeaderEl.querySelector('.el-dialog__headereln_full img');
    if (isFullScreen == false) {
      nowHight = dragDom.clientHeight;
      nowWidth = dragDom.clientWidth;
      nowMarginTop = dragDom.style.marginTop;
      dragDom.style.left = '0';
      dragDom.style.top = '0';
      dragDom.style.height = '100VH';
      dragDom.style.width = '100VW';
      dragDom.style.marginTop = '0';
      isFullScreen = true;
      dialogHeaderEl.style.cursor = 'initial';
      dialogHeaderEl.onmousedown = null;
      parentDom.style.overflow = 'hidden';
      img.src = noFullImg;
    } else {
      dragDom.style.height = 'auto';
      dragDom.style.width = nowWidth + 'px';
      dragDom.style.marginTop = nowMarginTop;
      isFullScreen = false;
      dialogHeaderEl.style.cursor = 'move';
      dialogHeaderEl.onmousedown = moveDown;
      parentDom.style.overflow = 'auto';
      img.src = fullImg;
    }
  };

  //双击头部效果
  dialogHeaderEl.ondblclick = setFull;
  //点击按钮效果
  fullBtn.onclick = setFull;

  //拉伸(右下方)
  const resizeEl = document.createElement('div');
  dragDom.appendChild(resizeEl);
  //在弹窗右下角加上一个10-10px的控制块
  resizeEl.style.cursor = 'se-resize';
  resizeEl.style.position = 'absolute';
  resizeEl.style.height = '10px';
  resizeEl.style.width = '10px';
  resizeEl.style.right = '0px';
  resizeEl.style.bottom = '0px';
  resizeEl.style.zIndex = '99';
  //鼠标拉伸弹窗
  resizeEl.onmousedown = (e) => {
    if (isFullScreen) return;
    // 记录初始x位置
    const clientX = e.clientX;
    // 鼠标按下，计算当前元素距离可视区的距离
    const disX = e.clientX - resizeEl.offsetLeft;
    const disY = e.clientY - resizeEl.offsetTop;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件

      // 通过事件委托，计算移动的距离
      const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
      const y = e.clientY - disY;
      //比较是否小于最小宽高
      dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
      dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  //拉伸(左下方)
  const resizeElLeft = document.createElement('div');
  dragDom.appendChild(resizeElLeft);
  //在弹窗右下角加上一个10-10px的控制块
  resizeElLeft.style.cursor = 'sw-resize';
  resizeElLeft.style.position = 'absolute';
  resizeElLeft.style.height = '10px';
  resizeElLeft.style.width = '10px';
  resizeElLeft.style.left = '0px';
  resizeElLeft.style.bottom = '0px';
  resizeElLeft.style.zIndex = '99';
  //鼠标拉伸弹窗
  resizeElLeft.onmousedown = (e) => {
    if (isFullScreen) return;
    // 记录初始x位置
    const clientX = e.clientX;
    // 鼠标按下，计算当前元素距离可视区的距离

    const disX = dragDom.clientWidth; // 鼠标按下 记录元素的宽

    const disY = e.clientY - resizeElLeft.offsetTop;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件

      // 通过事件委托，计算移动的距离
      const x = disX + (clientX - e.clientX) * 2; //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
      const y = e.clientY - disY;
      //比较是否小于最小宽高
      dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
      dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  //拉伸(右边)
  const resizeElR = document.createElement('div');
  dragDom.appendChild(resizeElR);
  //在弹窗右下角加上一个10-10px的控制块
  resizeElR.style.cursor = 'ew-resize';
  resizeElR.style.position = 'absolute';
  resizeElR.style.height = '100%';
  resizeElR.style.width = '10px';
  resizeElR.style.right = '0px';
  resizeElR.style.top = '0px';
  //鼠标拉伸弹窗
  resizeElR.onmousedown = (e) => {
    if (isFullScreen) return;
    const elW = dragDom.clientWidth;
    const EloffsetLeft = dragDom.offsetLeft;
    // 记录初始x位置
    const clientX = e.clientX;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件
      //右侧鼠标拖拽位置
      if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
        //往左拖拽
        if (clientX > e.clientX) {
          if (dragDom.clientWidth < minWidth) {
            // console.log(111);
          } else {
            dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
          }
        }
        //往右拖拽
        if (clientX < e.clientX) {
          dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
        }
      }
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  //拉伸(左边)
  const resizeElL = document.createElement('div');
  dragDom.appendChild(resizeElL);
  //在弹窗右下角加上一个10-10px的控制块
  resizeElL.style.cursor = 'ew-resize';
  resizeElL.style.position = 'absolute';
  resizeElL.style.height = '100%';
  resizeElL.style.width = '10px';
  resizeElL.style.left = '0px';
  resizeElL.style.top = '0px';
  //鼠标拉伸弹窗
  resizeElL.onmousedown = (e) => {
    if (isFullScreen) return;
    const elW = dragDom.clientWidth;
    const EloffsetLeft = dragDom.offsetLeft;
    // 记录初始x位置
    const clientX = e.clientX;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件
      //左侧鼠标拖拽位置
      if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
        //往左拖拽
        if (clientX > e.clientX) {
          dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
        }
        //往右拖拽
        if (clientX < e.clientX) {
          if (dragDom.clientWidth < minWidth) {
            // console.log(222);
          } else {
            dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
          }
        }
      }
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  // 拉伸（上边框）
  let resizeElT = document.createElement("div");
  dragDom.appendChild(resizeElT);
  //在弹窗上方加上一个10-10px的控制块
  resizeElT.style.cursor = "n-resize";
  resizeElT.style.position = "absolute";
  resizeElT.style.height = "10px";
  resizeElT.style.width = "100%";
  resizeElT.style.left = "0px";
  resizeElT.style.top = "0px";
  //鼠标拉伸弹窗
  resizeElT.onmousedown = (e) => {
    let EloffsetTop = dragDom.offsetTop;
    let ELscrollTop = el.scrollTop;
    let clientY = e.clientY;
    let elH = dragDom.clientHeight;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件
      //顶部鼠标拖拽位置
      if (
        ELscrollTop + clientY < EloffsetTop + elH - 20 &&
        ELscrollTop + clientY < EloffsetTop + elH
      ) {
        //往上拖拽
        if (clientY > e.clientY) {
          dragDom.style.height = elH + (clientY - e.clientY) + "px";
          if(dragDom.style.top) {
            // 拖拽改变位置会改变style的top参数，故需加层判定抵消top的值
            dragDom.style.marginTop = e.clientY - Number(dragDom.style.top.slice(0, -2)) + 'px';
          } else {
            dragDom.style.marginTop = e.clientY + 'px';
          }
        }
        //往下拖拽
        if (clientY < e.clientY) {
          if (dragDom.clientHeight < minHeight) {
          } else {
            dragDom.style.height = elH - (e.clientY - clientY) + "px";
            if(dragDom.style.top) {
              dragDom.style.marginTop = e.clientY - Number(dragDom.style.top.slice(0, -2)) + 'px';
            } else {
              dragDom.style.marginTop = e.clientY + 'px';
            }
          }
          
        }
        
      }
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

  // 拉伸(下边)
  const resizeElB = document.createElement('div');
  dragDom.appendChild(resizeElB);
  //在弹窗右下角加上一个10-10px的控制块
  resizeElB.style.cursor = 'ns-resize';
  resizeElB.style.position = 'absolute';
  resizeElB.style.height = '10px';
  resizeElB.style.width = '100%';
  resizeElB.style.left = '0px';
  resizeElB.style.bottom = '0px';
  //鼠标拉伸弹窗
  resizeElB.onmousedown = (e) => {
    if (isFullScreen) return;
    const EloffsetTop = dragDom.offsetTop;
    const ELscrollTop = el.scrollTop;
    const clientY = e.clientY;
    const elH = dragDom.clientHeight;
    document.onmousemove = function (e) {
      e.preventDefault(); // 移动时禁用默认事件
      //底部鼠标拖拽位置
      if (
        ELscrollTop + clientY > EloffsetTop + elH - 20 &&
        ELscrollTop + clientY < EloffsetTop + elH
      ) {
        //往上拖拽
        if (clientY > e.clientY) {
          if (dragDom.clientHeight < minHeight) {
            // console.log(333);
          } else {
            dragDom.style.height = elH - (clientY - e.clientY) + 'px';
          }
        }
        //往下拖拽
        if (clientY < e.clientY) {
          dragDom.style.height = elH + (e.clientY - clientY) + 'px';
        }
      }
    };
    //拉伸结束
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
};

const reset = (el) => {
  const dom = el.querySelector('.el-dialog');
  dom.style.width = dom.style.width;
  dom.style.height = dom.style.height
  dom.style.left = dom.style.left;
  dom.style.top = dom.style.top;
};

Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    console.log(el,'22222222222222')
    registerEvent(el);
    // 隐藏的时候还原位置---
    setTimeout(() => {
      const style = window.getComputedStyle(el);
      if (style.display === 'none') {
        reset(el);
      }
    }, 500);
  },
  // updated(el) {
  //   console.log(el,'dialogDragdialogDrag')
  //   registerEvent(el);
  //   // 隐藏的时候还原位置---
  //   setTimeout(() => {
  //     const overlay = el.querySelector('.el-overlay');
  //     const style = window.getComputedStyle(overlay);
  //     if (style.display === 'none') {
  //       reset(el);
  //     }
  //   }, 500);
  // },
  updated(el){
    console.log('updated el',el);
  }
})
